iT邦幫忙

2022 iThome 鐵人賽

0
AI & Data

初學者介紹TensFlow.js系列系列 第 28

[Day28]繪出偵測結果

  • 分享至 

  • xImage
  •  

今天我們要來談談如何繪製偵測結果。

我們可以使用像之前處裡影像的方式依樣執行偵測和繪圖,在每次呼叫開始之前必須刪除上一次呼叫所偵測到的結果,否則畫布會逐漸被舊的偵測結果給填滿,因此我們需要使用clearRect從指定座標中刪除任何內容。
像是
https://ithelp.ithome.com.tw/upload/images/20221015/20152506EzxfNaHT7H.png
然後在每個繪製結束進行清理時必須保留住模型,因為我們每次進行都需要用到它,如果清理掉便需要再次載入模型從而降低效率(之前有提到載入模型所需要的時間是最多的),而其他不需要的部分則必須捨棄不然會占太多空間影響到畫布。

我們有提過為了重複執行會使用preformDetections函數在無窮的迴圈中遞迴式的呼叫自己,但是該函數會執行的比畫布繪製的速度還快,為了確保不浪費不必要的迴圈執行次數我們會使用瀏覽器的requestAnimationFrame來限制它:
如下圖
https://ithelp.ithome.com.tw/upload/images/20221015/20152506jMlvvPOELQ.png

就這樣我們達成了過一些邏輯上的調整從靜止的影像中轉移到了視訊輸入,我們所看到將會是每秒16禎的圖框。

今天就講到這裡,謝謝大家。


上一篇
[Day27]啟動網路攝影機
下一篇
[Day29]回顧整理
系列文
初學者介紹TensFlow.js系列30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言